<template>
  <div>
    <div class="data_bodey">
      <div class="index_nav">
        <myheader current="baoan"></myheader>
        <div
          style="
            opacity: 1;
            font-size: 26px;
            letter-spacing: 6px;
            text-align: center;
          "
          class="total_chose_pl abs t_title"
        >
          城市安保运营服务中心
        </div>

        <div class="clear"></div>
      </div>
      <div class="index_tabs">
        <!--监控视频-->
        <div class="inner" style="height: 109%">
          <div class="left_cage">
            <div
              class="dataAllBorder01 cage_cl"
              style="margin-top: 9% !important; height: 24%"
            >
              <div style="overview: hidden" class="dataAllBorder02">
                <div class="data_tit1">监控视频</div>
                <Video></Video>
              </div>
            </div>
            <div
              class="dataAllBorder01 cage_cl"
              style="margin-top: 1.5% !important; height: 38%"
            >
              <div style="overview: hidden" class="dataAllBorder02">
                <div class="data_tit1">最新注册人员</div>
                <div
                  style="height: calc(100% - 23px); width: 100%"
                  class="row1 acen"
                >
                  <div style="width: 10%" @click="getBeforePeople()">
                    <el-tooltip
                      effect="dark"
                      content="上一页"
                      placement="top-start"
                    >
                      <i
                        style="color: #fff; font-size: 30px; cursor: pointer"
                        class="el-icon-arrow-left"
                      ></i>
                    </el-tooltip>
                  </div>
                  <div class="row1 thecatchphoto fwrap">
                    <el-image
                      v-for="(item, idx) in peopleImg"
                      :key="idx"
                      class="catchphoto"
                      :src="item"
                    ></el-image>
                  </div>
                  <div style="width: 10%" @click="getNextPeople()">
                    <el-tooltip
                      effect="dark"
                      content="下一页"
                      placement="top-start"
                    >
                      <i
                        style="color: #fff; font-size: 30px; cursor: pointer"
                        class="el-icon-arrow-right"
                      ></i>
                    </el-tooltip>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="dataAllBorder01 cage_cl"
              style="
                margin-top: 1.5% !important;
                height: 32%;
                position: relative;
              "
            >
              <!-- 用户列表滚动 -->
              <div class="dataAllBorder02" style="overflow: hidden">
                <div class="data_tit1">用户单位列表</div>
                <div class="message_scroll_box">
                  <div
                    v-for="(item, index) in scrollList"
                    :key="index"
                    class="message_scroll"
                  >
                    <div class="scroll_top">
                      <span class="scroll_title">{{ item.BMMC }}</span>
                    </div>
                    <div class="msg_cage">
                      <a class="localize_title">{{ item.MC }}</a>
                    </div>
                    <div class="msg_cage">
                      <a class="localize_msg">{{ item.DZ }}</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="scroll_tool_outbox">
                <div class="scroll_tool_box">
                  <a class="scroll_tool" href="#">查看历史推送</a>
                </div>
              </div>
            </div>
          </div>
          <div class="center_cage">
            <div
              class="dataAllBorder01 cage_cl"
              style="
                margin-top: 3.5% !important;
                height: 62.7%;
                position: relative;
              "
            >
              <div class="dataAllBorder02">
                <!--标题栏-->
                <Gmap
                  @getJF="jifang = $event"
                  @getWeather="weather = $event"
                  @getForecast="forecast = $event"
                  @getDWID="DWID = $event"
                ></Gmap>
              </div>
            </div>
            <div
              class="dataAllBorder01 cage_cl"
              style="margin-top: 0.6% !important; height: 32.1%"
            >
              <div class="dataAllBorder02" id="map_title_innerbox">
                <div class="map_title_box">
                  <div class="map_title_innerbox">
                    <div
                      class="map_title"
                      style="background-image: url(img/second_title.png)"
                    >
                      <!-- {{jifang}} -->
                      人员列表
                    </div>
                  </div>
                </div>
                <div style="width: 100%; height: 90%">
                  <mytable :ID="DWID"></mytable>
                </div>
              </div>
            </div>
          </div>
          <div class="right_cage">
            <!--天气预报-->
            <div
              class="dataAllBorder01 cage_cl"
              style="margin-top: 9% !important; height: 24%"
            >
              <div class="data_tit1">天气预报</div>
              <div class="cfff ml10">
                <div class="row1 lh40">
                  <div class>{{ time }}</div>
                  <div class="ml10">{{ weather.title }}</div>
                  <div class="ml5">
                    <!-- <span v-if="weather.weather" class="iconfont" :class="getIcon(weather.weather)"></span> -->
                    {{ weather.weather }}
                  </div>
                  <div class="ml5">{{ weather.temperature }}℃</div>
                  <div class="ml5">{{ weather.windDirection }}风</div>
                  <div class="ml5">{{ weather.windPower }}级</div>
                </div>

                <div class="row1">
                  <div class="lh30">发布时间： {{ weather.reportTime }}</div>
                </div>
                <div class="col">
                  <div
                    :key="idx"
                    v-for="(item, idx) in forecast"
                    class="row acen lh20"
                  >
                    <div class="mt5">{{ item.date }}</div>
                    <div class="ml5 mt5">
                      {{
                        weeks.find((a) => {
                          return item.week == a.id;
                        }).name || "星期三"
                      }}
                    </div>
                    <div class="ml5 mt5">
                      <span
                        v-if="item.dayWeather"
                        class="iconfont"
                        :class="getIcon(item.dayWeather)"
                      ></span
                      >{{ item.dayWeather }}
                    </div>
                    <div class="ml5 mt5">{{ item.dayTemp }}℃</div>
                    <div class="ml5 mt5">夜晚气温{{ item.nightTemp }}℃</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 抓拍图片 -->
            <div
              class="dataAllBorder01 cage_cl check_increase"
              style="margin-top: 1.5% !important"
            >
              <div
                class="dataAllBorder02 over_hide dataAllBorder20"
                id="over_hide"
              >
                <div class="data_tit1">实时抓拍</div>
                <catchPhoto></catchPhoto>
              </div>
            </div>
            <div
              class="dataAllBorder01 cage_cl check_decrease"
              style="
                margin-top: 1.5% !important;
                height: 32%;
                position: relative;
              "
            >
              <div class="dataAllBorder02 over_hide">
                <div id="jifang" class="mydata_tit">用户单位数量统计</div>
                <!-- <table lay-filter="anbao" id="anbaoTable" style="width: 100%"></table> -->
                <Business></Business>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import myheader from "@/components/header";
import Business from "@/pages/echarts/first/Business";
import Gmap from "@/pages/maps/map";
import mytable from "@/pages/maps/mytable";
import Video from "@/pages/echarts/first/videotest";
import catchPhoto from "@/pages/echarts/first/catchPhoto";
import user from "@/api/user";
import { getToken, setToken } from "@/utils/auth";
export default {
  components: {
    myheader,
    Business,
    Gmap,
    mytable,
    Video,
    catchPhoto,
  },
  data() {
    return {
      showTheme: false,
      checkAll: false,
      checkedCities: [],
      cities: [],
      isIndeterminate: true,
      arr: [],
      scrollList: [],
      urls: [],
      peopleImg: [
        require("@/assets/loading1.gif"),
        require("@/assets/loading1.gif"),
        require("@/assets/loading1.gif"),
        require("@/assets/loading1.gif"),
      ],
      todayPassTotal: 1060,
      peoplepage: 1,
      catchpage: 1,
      jifang: "天府街道",
      weather: {},
      forecast: [],
      DWID: "001003001002004000000000000000",
      time: "00:00:00",
      date: "2020/01/01",
      box_css: "",
      weeks: [
        {
          id: 7,
          name: "星期天",
        },
        {
          id: 1,
          name: "星期一",
        },
        {
          id: 2,
          name: "星期二",
        },
        {
          id: 3,
          name: "星期三",
        },
        {
          id: 4,
          name: "星期四",
        },
        {
          id: 5,
          name: "星期五",
        },
        {
          id: 6,
          name: "星期六",
        },
      ],
      wea_icons: [
        { icon: "icon-tianqi-qing", name: "晴" },
        { icon: "icon-tianqi-tedabaoyu", name: "雨" },
        { icon: "icon-tianqi-yin", name: "阴" },
        { icon: "icon-tianqi-duoyun", name: "云" },
      ],
    };
  },

  methods: {
    getIcon(w) {
      let s = this.wea_icons.find((item) => {
        return w.indexOf(item.name) > -1;
      });
      return s.icon;
    },
    isShowTheme() {
      this.showTheme = !this.showTheme;
    },
    fnW(str) {
      var num;
      str >= 10 ? (num = str) : (num = "0" + str);
      return num;
    },
    getTime() {
      let that = this;
      setInterval(function () {
        var date = new Date();
        var year = date.getFullYear(); //当前年份
        var month = date.getMonth(); //当前月份
        var data = date.getDate(); //天
        var hours = date.getHours(); //小时
        var minute = date.getMinutes(); //分
        var second = date.getSeconds(); //秒
        var day = date.getDay(); //获取当前星期几
        var ampm = hours < 12 ? "am" : "pm";
        that.time =
          that.fnW(hours) + ":" + that.fnW(minute) + ":" + that.fnW(second);
        that.date = year + "/" + (month + 1) + "/" + data + ampm + "周" + day;
      }, 1000);
    },
    checkForm() {
      return false;
    },
    handleCheckAllChange(val) {
     
      this.checkedCities = val
        ? this.cities.map(function (item) {
            return item.ID;
          })
        : [];
      this.isIndeterminate = false;
      window.pickBranch = this.checkedCities;
    },
    handleCheckedCitiesChange(value) {
      
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
      window.pickBranch = this.checkedCities;
    },
    getPicks() {
      this.showTheme = false;
    },
    getBeforeCatch() {
      if (this.catchpage == 1)
        return this.$alert("已经是第一页了", "提示", {
          confirmButtonText: "确定",
        });
      this.catchpage--;
      this.getCatchPhoto();
    },
    getNextCatch() {
      this.catchpage++;
      this.getCatchPhoto();
    },
    getScrollList: function () {
      let that = this;
      that.axios
        .post(`${that.$store.state.app.http}/list/getCustom`, {
          limit: 200,
          page: 1,
          para: {
            where: { BMLX: "03", SSGS: "001000000000000000000000000000" },
          },
        })
        .then((res) => {
          that.scrollList = res.data.data;
        });
    },

    // 获取人口图片
    getPeopleImg: async function (page) {
      let that = this;
      let para = {
        page: page,
        limit: 4,
        auditStatus: 1,
      };
      let res = await user.sys_person_list(para);    
      that.peopleImg = res.data.map(function (item) {
        let avatar = that.$store.state.headurl + "/" + item.photo;
        return avatar;
      });
    },

    // 获取上一批
    getBeforePeople() {
      if (this.peoplepage == 1)
        return this.$alert("已经是第一页了", "提示", {
          confirmButtonText: "确定",
        });
      this.peoplepage--;
      let page = this.peoplepage;
      this.getPeopleImg(page);
    },
    //下一批
    getNextPeople() {
      this.peoplepage++;
      let page = this.peoplepage;
      this.getPeopleImg(page);
    },
    //3qi登录
    async Login() {
      let that = this;
      let para = {
        username: that.$store.state.app.username,
        password: that.$store.state.app.password,
      };
      
      const res = await user.login(para);
      setToken(res.data.token);
    },
    getDic() {
      let that = this;
      that.axios
        .post(`${that.$store.state.app.http}/list/getDic`, {
          para: {
            where: {
              SSGS: "001000000000000000000000000000",
            },
          },
        })
        .then((res) => {
          sessionStorage.setItem("dicList", JSON.stringify(res.data.data));
        });
    },
  },
  created: async function () {
   
    
  },
 async mounted() {
     let token = getToken();
    if (!token) {
     await this.Login();
    }
    if (!sessionStorage.getItem("dicList")) {
     await this.getDic();
    }
    this.getPeopleImg(1);
    this.getScrollList();
    this.getTime();
  },
};
</script>

<style scoped lang='scss'>
.el-checkbox {
  color: #fff;
}

/*导航*/
</style>
<style lang="scss">
.catchphoto {
  width: calc(49.5% - 2px);
  height: 49.5%;
  float: left;
  -o-object-fit: fill;
  object-fit: fill;
  border: 1px solid rgba(12, 122, 200, 0.5);
}
.thecatchphoto {
  width: 80%;
  height: 100%;
}
</style>